<template>
  <nut-input
    v-model="selectedMerName"
    placeholder="请选择商户/门店"
    readonly
    @click="showPicker = true"
  />
  <nut-popup v-model:visible="showPicker" position="bottom" safe-area-inset-bottom>
    <nut-picker
      v-model="selectedMer"
      :columns="merList"
      title="商户/门店"
      :field-names="{
        text: 'name',
        value: 'id',
      }"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </nut-popup>
</template>

<script lang="ts" setup>
import mcht from '@/api/mcht'
const model = defineModel({ type: String })
const type = defineModel('type', { type: String })
const merList = ref([])
const selectedMer = ref([])
const selectedMerName = ref('')
const showPicker = ref(false)
function onConfirm({ selectedValue }: { selectedValue: (string | number)[] }) {
  showPicker.value = false
  const item = merList.value.find((x: Option) => x.id === selectedValue[0])
  if (item) {
    selectedMerName.value = item.name
    model.value = selectedValue[0]
    type.value = item.type
  }
}
onMounted(async () => {
  const { data } = await mcht.getMchtStoreList()
  if (data.status === 'success') {
    merList.value = data.data.mchtList
    if (merList.value.length > 0) {
      // 初始化值
      model.value = merList.value[0].id
      type.value = merList.value[0].type
      selectedMer.value = [merList.value[0].id]
      selectedMerName.value = merList.value[0].name
    }
  }
})
</script>